<template>
	<view>
		<view class="repWrap">
			<view class="formItem">
				<view class="formTit"><span class="mustTag">*</span>干预地点</view>
				<view class="formItemCon"> 
					<input class="formInp" v-model="gyAddress" type="text" maxlength="50" placeholder="请输入干预地点"  placeholder-style="color:#858585"/>
				</view>
			</view>
			<view class="formItem">
				<view class="formTit"><span class="mustTag">*</span>干预日期</view>
				<view class="formItemCon"> 
					<picker class="pickerView" mode="date" :value="gyDate" fields="day" @change="bindDateChange" start="2010-01-01">
						<view class="pickTxt" :class="[selDateFlag ? 'hasSel' : '']">{{gyDate}}</view>
					</picker>
				</view>
			</view>
			<view class="formItem">
				<view class="formTit"><span class="mustTag">*</span>干预时间</view>
				<view class="formItemSelTime" @tap="timeModeAction"> 
					<view class="gyTime" v-if="startTime == ''">请选择干预时间</view>
					<template v-else>
						<view class="hasSelTime">{{startTime}}~{{endTime}}</view>
					</template>
				</view>
			</view>
			<view class="modTit"><span class="mustTag">*</span>问题归类<text class="tip">(可多选,最多选4项)</text></view>
			<view class="moCon clearfix">
				<view class="typeItem"
					:class="[item.selFlag ? 'active' : '']"
					v-for="(item,index) in tagList"
					:key="index"
					@tap="selectTag(item)"
				>{{item.tagName}}</view>
			</view>
			<view class="modTit"><span class="mustTag">*</span>咨询主题</view>
			<view class="modCon hasMargBot">
				<textarea v-model="zxTit" class="txtArea" placeholder="请输入咨询主题(100字内)" maxlength="100"></textarea>
			</view>
			<view class="modTit"><span class="mustTag">*</span>辅导要点</view>
			<view class="modCon hasMargBot">
				<textarea v-model="fdyd" class="txtArea" placeholder="请输入辅导要点(200字内)" maxlength="200"></textarea>
			</view>
			<view class="modTit"><span class="mustTag">*</span>总结反思</view>
			<view class="modCon hasMargBot">
				<textarea v-model="zjfs" class="txtArea" placeholder="请输入总结反思(200字内)" maxlength="200"></textarea>
			</view>
			<view class="itemRadCon" @tap="showRepTestSta">
				<view class="radView" :class="[cpTag == 1 ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
				<view class="radTit">是否进行复测</view>
			</view>
			<view class="itemRadCon" @tap="showViewTagSta">
				<view class="radView" :class="[viewTag == 1 ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
				<view class="radTit">干预报告是否同步给用户{{zxName}}</view>
			</view>
			<!-- 是否进行复测 cpTag 1.是 2.否 -->
			<button class="comBtn" :disabled="isDisableFlag" @tap="goSubmit">提交</button>
		</view>
		<date-range :mode="viewMode" :showMutibleDate="showMutibleDate" :startDate="startTime_init" :endDate="endTime_init" @onSelected="dateSelected"></date-range>
	</view>
</template>

<script>
	import { getGroupTagList,addGyRep } from '@/api/mine/index.js'
	import dateRange from '@/components/zxp-datepickerRange/zxp-datepickerRange'
	export default {
		components:{
			dateRange
		},
		data(){
			return{
				detId:0,
				gyAddress:'',
				gyDate:'请选择干预日期',
				zxTit:'',
				fdyd:'',
				zjfs:'',
				tagList:[],
				sdNameArr:[],
				sdIdArr:[],
				queList:[],
				zxName:'',
				cpTag:2,//是否复测 1.允许 2.否
				repTestFlag:false,
				viewTag:2,//1允许 2不允许
				viewTagFlag:false,
				selDateFlag:false,
				viewMode:'time',
				showMutibleDate:false,
				startTime_init:'08:00',
				startTime:'',
				endTime_init:'08:00',
				endTime:'',
				isDisableFlag:false
			}
		},
		onLoad(option){
			this.zxName = option.userName;
			this.detId = option.detId;
			this.getSdTagList();
		},
		methods:{
			getSdTagList(){
				var field = { showStatus:1,tagType:2 }
				getGroupTagList(field).then(res=>{
					this.tagList = res.data.datas;
					for(let i in this.tagList){
						this.$set(this.tagList[i],'selFlag',false);
					}
				}).catch(err=>{
					console.log(err)
				});
			},
			bindDateChange(e){
				this.gyDate = e.detail.value;
				this.selDateFlag = true;
			},
			timeModeAction:function(){
				if(this.startTime != ''){
					this.startTime_init = this.startTime;
					this.endTime_init = this.endTime;
				}else{
					this.startTime_init = '08:00';
					this.endTime_init = '08:00';
				}
				this.showMutibleDate = true
			},
			dateSelected:function(e){
				if (e){
					let newStart = Number( e.start.replace(':','') );
					let newEnd = Number( e.end.replace(':','') )
					if(newEnd < newStart){
						this.util.showToast('结束时间应大于开始时间');
						return;
					}
					if(newStart == newEnd){
						this.util.showToast('开始时间和结束时间不能相同');
						return;
					}
					this.startTime = e.start;
					this.endTime = e.end;
				}
				/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
				this.showMutibleDate = false;
			},
			selectTag(item){
				if(item.selFlag){
					this.$set(item,'selFlag',false);
					for(var i=0;i<this.sdIdArr.length;i++){
						if(item.id == this.sdIdArr[i]){
							this.sdIdArr.splice(i,1);
							this.sdNameArr.splice(i,1);
						}
					}
				}else if(item.selFlag == false){
					this.$set(item,'selFlag',true)
					this.sdIdArr.push(item.id);
					this.sdNameArr.push(item.tagName);
				}
			},
			showRepTestSta(){
				this.repTestFlag = !this.repTestFlag;
				this.cpTag = this.repTestFlag ? 1 : 2;
			},
			showViewTagSta(){
				this.viewTagFlag = !this.viewTagFlag;
				this.viewTag = this.viewTagFlag ? 1 : 2;
			},
			goSubmit(){
				if(this.gyAddress == ''){
					this.util.showToast('请填写干预地点');
				}else if(this.gyDate == '请选择干预日期'){
					this.util.showToast('请选择干预日期');
				}else if(this.startTime == ''){
					this.util.showToast('请选择干预时间');
				}else if(this.sdIdArr.length == 0){
					this.util.showToast('请选择问题归类');
				}else if(this.sdIdArr.length > 4){
					this.util.showToast('情况概述标签最多可选4项');
				}else if(this.zxTit == ''){
					this.util.showToast('请填写咨询主题');
				}else if(this.fdyd == ''){
					this.util.showToast('请填写辅导要点');
				}else if(this.zjfs == ''){
					this.util.showToast('请填写总结反思');
				}else{
					let zxwtTypeStr = this.sdNameArr.join(','),zxwtTypeIdStr = this.sdIdArr.join(',');
					let clsTimeStr = this.startTime + '~' + this.endTime;
					let field = { 
						allotDetailId:this.detId,
						zxAddress:this.gyAddress,
						zxDate:this.gyDate,
						classTime:clsTimeStr,
						zxTitle:this.util.replaceToBr(this.zxTit),
						zxwtTypeId:zxwtTypeIdStr,
						zxwtType:zxwtTypeStr,
						fdyd:this.util.replaceToBr(this.fdyd),
						zjfs:this.util.replaceToBr(this.zjfs),
						cpTag:this.cpTag,
						viewTag:this.viewTag }
					uni.showLoading({ title: '提交中...', mask: true }); 
					this.isDisableFlag = true;
					addGyRep(field).then(res=>{
						uni.showToast({ title: '提交成功' });
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.isRefreshFlag = true;
						setTimeout(()=>{
							uni.navigateBack({delta:1})
						},1500)
					}).catch(err=>{
						this.isDisableFlag = false;
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/scss/addZxRep.scss';
.mustTag{
	color: $pss-color-red;
	font-size: 24rpx;
}
.formItem{
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
	font-size: 28rpx;
	.formTit{
		width: 130rpx;
		height: 100%;
		line-height: 80rpx;
		font-size: $font-size28;
		color: $pss-text-color3;
		flex-shrink: 0;
	}
	.formItemSelTime{
		flex: 1;
		height: 80rpx;
		margin-left: 15rpx;
		border:1rpx solid #ccc;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.gyTime{
			padding: 0 5%;
			color: $pss-text-color8;
		}
		.hasSelTime{
			padding: 0 5%;
			color: $pss-text-color0;
		}
	}
	.formItemCon{
		flex: 1;
		height: 80rpx;
		margin-left: 15rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border:1rpx solid #ccc;
		border-radius: 8rpx;
		.formInp{
			width: 90%;
			height: 100%;
			text-align: right;
			font-size: $font-size28;
			color: $pss-text-color3; 
			padding: 0 5%;
			font-size: 28rpx;
		}
	}
	/* 紧急联系人 */
	.pickerView{
		width: 100%;
		height: 100%;
		line-height: 80rpx;
		text-align: right;
		font-size: $font-size28;
		.pickTxt{
			padding: 0 5%;
			color: $pss-text-color8;
			&.hasSel{
				color: $pss-text-color0;
			}
		}
		.icon-sanjiao{
			color: $pss-text-colora;
		}
	}
}
</style>